<template>
    <div>
        <el-select v-model="value" :multiple="false" collapse-tags style="width: 100%" @change="handleChange"
            size="small" :placeholder="$t('labels.pleaseSelect')" @visible-change="handleVisible" :disabled="disabled"
            :clearable="clearable" @clear="handleClear">
            <el-option v-for="item in datas" :key="item.value" :label="item.label" :value="item.value" :class="optionClass">
                <span style="float: left">{{ item.label }}</span>
            </el-option>
        </el-select>
    </div>
</template>
<script>
export default {
    data() {
        return {
            datas: [],
            value: null,
        };
    },
    model: {
        prop: "type",
        event: "innerChange",
    },
    methods: {
        getData() {
            this.datas = [{
                label: "供应商",
                value: 1
            }, {
                label: "客户",
                value: 2
            }, {
                label: "员工",
                value: 3
            }]
        },
        handleChange(value) {
            value = value ? value : null
            this.$emit("innerChange", value);

            let selected = !value ? {} : this.datas.find((x) => x.value == value);
            this.$emit("change", selected);
        },
        handleVisible(visible) {
            this.$emit("visible-change", visible);
        },
        handleClear() {
            this.value = null;
        }
    },
    watch: {
        type: {
            handler(val) {
                this.value = val;
            },
            immediate: true
        },
    },
    mounted() {
        this.getData();
    },
    props: {
        type: {
            type: Number,
        },
        optionClass: {
            type: String,
            default: "",
        },
        disabled: {
            type: Boolean
        },
        clearable: {
            type: Boolean,
            default: true
        }
    },
};
</script>